<template>
	<div class="todoitem">
		<input type="checkbox" :checked="todo.done" @change="handleChange" />
		<span>{{todo.title}}</span>
		<span class="del" @click="handleDelete">删除</span>
	</div>
</template>

<script>
	export default {
		name:'todo-item',
		data(){
			return {
				// todoStatus:this.todo.done
			}
		},
		props:['todo','deleteTodos','changeTodos'],
		methods:{
			handleDelete(){
				if(confirm('确定删除吗？')){
					this.deleteTodos(this.todo.id)
				}
			},
			handleChange(){
				this.changeTodos(this.todo.id)
			}
		},
	}
</script>

<style scoped>
	.todoitem{
		border: 1px solid #cccccc;
		padding: 5px 2px;
		box-sizing: border-box;
	}
	.todoitem:hover{
		background-color: #cccccc;
	}
	.del{
		float: right;
		cursor: pointer;
		color: red;
		display: none;
	}
	.todoitem:hover .del{
		display: inline-block;
	}
</style>